<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="comm.css">
    <script src="util.js"></script>
    <title>FAQ</title>
    <style>
        .top_title {
            padding-bottom: 15px;
            font-size: 18px;
            font-weight: 900;
            color: #ababab;
        }
        .menuList_help {}
        .menuList_help li {
            padding: 12px 3px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            width: 100%;
            font-weight: 400;
            border-bottom: 2px solid #f5f5f5;
            font-size: 17px;
            color: #000000;
            white-space: normal;
            word-break: keep-all;
            overflow: hidden;
        }
        .menuList_help li span:nth-of-type(2) img {
            width: 12px;
        }

    </style>
</head>
<body>
    <div class="content">
        <header class="top_title">
            <span>FAQ</span>
        </header>

        <a id="routerTag" href="" style="display: none;"></a>
        <ul class="menuList_help" id="menuList_help">
            <li>
                <span>1.How to create an APP account for my family?</span>
                <span><img src="./imgs/right.png" alt=">"></span>
            </li>
            <li>
                <span>2.Actions that can be performed on the device on the APP.</span>
                <span><img src="./imgs/right.png" alt=">"></span>
            </li>
            <li>
                <span>3.What is a temporary key? How to use it?</span>
                <span><img src="./imgs/right.png" alt=">"></span>
            </li>
            <li>
                <span>4.How do I get my password back if I forget password?</span>
                <span><img src="./imgs/right.png" alt=">"></span>
            </li>
            <li>
                <span>5.How to use Bluetooth to open the door?</span>
                <span><img src="./imgs/right.png" alt=">"></span>
            </li>
        </ul>
    </div>
    
    <script>
        const menuUrls = [ "help_createApp.html", "help_operations.html", "help_temporaryPassword.html", "help_forgotPassword.html", "help_UseBluetooth.html" ];

        function initMenuMethods()
        {
            const ulEl = $("#menuList_help");
            const menuList = $("li", ulEl);
            const routerEl = $("#routerTag");

            for (let i = 0; i < menuList.length; i++)
            {
                menuList[i].addEventListener("click", (e) => {
                    routerEl.href = menuUrls[i];
                    routerEl.click();
                })
            }
        }

        initMenuMethods();
    </script>
</body>
</html>